<template>
  <cover-page @close="$emit('close'),saveSetting()" :show="show" cardStyle="height: 80%;background:#FFD700">
    <h2 style="text-align: center">排行榜</h2>
    <div class="tabs">
      <div class="tab" :class="'select_tab'">本地榜</div>
      <div class="tab" style="margin-left: -2px" @click="$toast({message:'全国榜\n暂未开放',position: 'bottom',})">全国榜</div>
      <div style="flex:1"></div>
      <div class="sorting" @click="timeOrScore=!timeOrScore">{{timeOrScore?'按日期':'按耗时'}}</div>

    </div>
    <div class="tab_card">
      <div class="list_bar">
        <div class="drop" tabIndex="0" @blur="ifShowList.mode = false">
          <div class="list_top" @click="ifShowList.mode = true">
            {{ options.mode[value.mode] }}
          </div>
          <div class="list" v-show="ifShowList.mode">
            <div v-for="(item, index) in options.mode" :key="item" :class="index == value.mode ? 'on_select' : ''" @click="value.mode = index,ifShowList.mode = false">
              {{ item }}
            </div>
          </div>
        </div>
        |
        <div class="drop" tabIndex="0" @blur="ifShowList.diff = false">
          <div class="list_top" @click="ifShowList.diff = true">
            {{ options.diff['mode'+(value.mode+1)][value.diff].name }}
          </div>
          <div class="list" v-show="ifShowList.diff">
            <div v-for="(item, index) in options.diff['mode'+(value.mode+1)]" :key="item.name" :class="index == value.diff ? 'on_select' : ''" @click="value.diff = index,ifShowList.diff = false">
              {{ item.name }}
            </div>
          </div>
        </div>
        |
        <div class="drop" tabIndex="0" @blur="ifShowList.schools = false">
          <div class="list_top" @click="ifShowList.schools = true">
            {{ options.schools[value.schools] }}
          </div>
          <div class="list" v-show="ifShowList.schools">
            <div v-for="(item, index) in options.schools" :key="item" :class="index == value.schools ? 'on_select' : ''" @click="value.schools = index,ifShowList.schools = false">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="pers">
          <div>总胜率：{{pers.main}}%</div>
          <div>模式胜率：{{pers.one}}%</div>
        </div>
        <div style="margin:20px 0;flex:1" v-if="topList==null || showList.length==0">暂无数据!!!∑(ﾟДﾟノ)ノ</div>
        <div v-else class="mlist">
          <div class="mitem" v-for="item,index in showList" @click="detail(item)" :key="'score'+index" :style="index==9?'border-bottom:none':''">
            <div class="item_l">
              <div class="item_lt">
                {{item.userName}}
              </div>
              <div class="item_lb">
                {{item.useTime | getScore}}
                <van-icon name="star" v-show="item.life==1" color="red" style="width:0" />
              </div>
            </div>
            <div class="item_r">
              <div class="item_rt">
                {{item.dateTime.toLocaleDateString()}}
              </div>
              <div class="item_rb">
                {{item.dateTime.toLocaleTimeString()}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </cover-page>
</template>

<script>
import coverPage from "../../components/coverPage.vue";
import difficulty from "@/assets/json/difficulty.json";
export default {
  name: "topListCard",
  props: ["show"],
  components: { coverPage },
  data() {
    return {
      topList: undefined,
      showList: [],
      pers: { main: '--', one: '--' },
      value: {
        mode: 0,
        diff: 1,
        schools: 0,
      },
      options: {
        mode: ["模式一", "模式二"],
        diff: difficulty,
        schools: ["插旗流", "盲扫流"],
      },
      ifShowList: {
        mode: false,
        diff: false,
        schools: false,
      },
      timeOrScore: true
    };
  },
  mounted() {
    if(localStorage['topListSettings']){
      this.value = JSON.parse(localStorage['topListSettings'])
    }
    let topList = localStorage["topList"];
    if (topList) {
      topList = JSON.parse(topList);
      topList.list.forEach(item => {
        item.dateTime = new Date(item.dateTime)
      });
      if (topList.win > 0 || topList.lose > 0) {
        this.pers.main = parseInt(topList.win / (topList.win + topList.lose) * 100)
      }
      this.topList = topList
    } else {
      this.topList = null;
    }
    this.getShowList()
  },
  methods: {
    //根据参数初始化要显示的数据列表
    getShowList() {
      //没有数据直接返回
      if (this.topList && this.topList.list.length > 0) {
        let nlist = []
        for (let item of this.topList.list) {
          if (item.difficulty.diff == this.value.diff &&
            item.difficulty.mode == this.value.mode + 1 &&
            item.flagSchools == (this.value.schools == 0)) {
            nlist.push(item)
          }
        }
        this.showList = nlist
      }
      let topList = this.topList
      if (topList?.['mode' + (this.value.mode + 1)]?.['d' + this.value.diff]?.['s' + (this.value.schools == 0)]) {
        let win = topList['mode' + (this.value.mode + 1)]['d' + this.value.diff]['s' + (this.value.schools == 0)].win
        let lose = topList['mode' + (this.value.mode + 1)]['d' + this.value.diff]['s' + (this.value.schools == 0)].lose
        if (win > 0 || lose > 0) {
          this.pers.one = parseInt(((win ? win : 0) / ((win ? win : 0) + (lose ? lose : 0))) * 100)
        } else {
          this.pers.one = '--'
        }
      } else {
        this.pers.one = '--'
      }

      this.sortingList()
    },
    //排序
    sortingList() {
      //没有数据直接返回
      if (this.showList.length == 0) return
      let lists = this.showList
      let nlist = []
      if (this.timeOrScore) {
        //按时间排序
        for (let i of lists) {
          let insert = false
          for (let j in nlist) {
            if (nlist[j].dateTime.getTime() < i.dateTime.getTime()) {
              nlist.splice(j, 0, i)
              insert = true
              break
            }
          }
          if (!insert) {
            nlist.push(i)
          }
        }
      } else {
        //按耗时排序
        for (let i of lists) {
          let insert = false
          for (let j in nlist) {
            if (nlist[j].useTime > i.useTime) {
              nlist.splice(j, 0, i)
              insert = true
              break
            }
          }
          if (!insert) {
            nlist.push(i)
          }
        }
      }
      this.showList = nlist
    },
    saveSetting(){
      localStorage['topListSettings'] = JSON.stringify(this.value)
    },
    detail(value){
      let str = `玩家：${value.userName}
${value.difficulty.mode==1?'模式一':'模式二'}，${value.flagSchools?'插旗流':'盲扫流'}${value.life==1?'，(无损通关)':''}
难度：${value.difficulty.name}(${value.difficulty.ux}×${value.difficulty.uy}×${value.difficulty.uz}|${value.difficulty.mineNum})
游戏耗时：${this.$options.filters['getScore'](value.useTime)}
达成时间：${value.dateTime.toLocaleString()}`
      this.$dialog.alert({
        title: '记录详情',
        message: str,
      });
    }
    
  },
  watch: {
    timeOrScore() {
      //排序方式发生变化
      this.sortingList()
    },
    value: {
      handler() {
        //重新获取数据
        this.getShowList()
      },
      deep: true
    }

  },
  filters: {
    getScore: function (val) {
      let ms = val % 100 * 10
      let ss = parseInt(val / 100) % 60
      let mm = parseInt(val / 6000) % 60
      let hh = parseInt(val / 360000)
      if (hh > 0) {
        return (hh < 10 ? '0' : '') + hh + 'h' + (mm < 10 ? '0' : '') + mm + '′' + (ss < 10 ? '0' : '') + ss + '″'
      } else {
        return (mm < 10 ? '0' : '') + mm + '′' + (ss < 10 ? '0' : '') + ss + '″' + (ms < 100 ? '0' : '') + (ms < 10 ? '0' : '') + ms 
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tabs {
  margin-top: 10px;
  display: flex;
  padding-left: 10px;
  z-index: 100;
  text-align: center;
  .tab {
    padding: 5px 10px;
    border: gray solid 2px;
    background: #0001;
    border-radius: 8px 8px 0 0;
  }
  .select_tab {
    border-bottom: none;
    background: #ff0;
  }
  .sorting {
    padding: 0 15px;
    margin: auto 5px;
    border: gray solid 2px;
    border-radius: 8px;
    background: yellow;
  }
}
.tab_card {
  margin-top: -2px;
  height: 150px;
  border: gray solid 2px;
  border-radius: 8px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #ff0;
  .list_bar {
    display: flex;
    border-bottom: gray solid 2px;
    line-height: 24px;
    height: 24px;
    border-radius: 8px 8px 0 0;
    z-index: 200;
    position: relative;
    .drop {
      flex: 1;
      text-align: center;
      .list {
        border: gray solid 2px;
        background: white;
        .on_select {
          background: lightgreen;
          margin: 1px;
        }
      }
    }
  }
  .main {
    text-align: center;
    flex: 1;
    display: flex;
    overflow: auto;
    flex-direction: column;
    .pers {
      border-bottom: gray solid 1px;
      display: flex;
      div {
        flex: 1;
      }
    }
    .mlist {
      flex: 1;
      display: flex;
      flex-direction: column;
      .mitem {
        flex: 1;
        min-height: 45px;
        max-height: 50px;
        border-bottom: gray solid 1px;
        display: flex;
        // background: gold;
        .item_l {
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;
          .item_lt {
            flex: 1;
          }
          .item_lb {
            flex: 1;
          }
        }
        .item_r {
          padding: 0 20px;
          display: flex;
          flex-direction: column;
          .item_rt {
            flex: 1;
          }
          .item_rb {
            flex: 1;
          }
        }
      }
    }
  }
}
</style>